<template>
  <i
    class="fa"
    :class="`fa-${iconClass}`"
    aria-hidden="true"
  ></i>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import '@/assets/css/font-awesome-4.7.0/css/font-awesome.min.css';

export default defineComponent({
  name: 'FaIcon',
  props: {
    name: {
      type: String,
      required: false,
    },
    icon: {
      type: String,
      required: false,
    },
  },
  setup(props) {
    const iconClass = computed<string>(() => (props.name || props.icon || 'font-awesome'));
    return {
      iconClass,
    };
  },
});
</script>
